<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
        <title>行走的家</title>
        <link rel="stylesheet" href="../vendors/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="../vendors/fontawesome/css/font-awesome.min.css" />
        <link rel="stylesheet" href="../css/style.css">
        <link rel="stylesheet" href="css/onthemove.css">
    </head>

    <body>
        <!-- 页面头部 开始 -->
        <div class="ic-header ">
            <div class="top-nav hidden-xs hidden-sm">
                <div class="container">
                    <div class="row">
                        <div class="top-nav-favsite col-xs-6">
                            <a href="#">收藏本站</a>
                        </div>
                        <div class="top-nav-useradmin col-xs-6">
                            <ul class="pull-right">
                                <li><a href="ic-designer-register.html">设计师注册</a></li>
                                <li><a href="ic-register.html">大众注册</a></li>
                                <li><a href="ic-login.html">登录</a></li>
                            </ul>
                            <div class="favfolder pull-right">
                                <a href=""><i class="fa fa-star"></i>收藏夹</a>
                            </div>
                            <div class="shopcart pull-right">
                                <a href=""><i class="fa fa-shopping-cart"></i>购物车<b>2</b></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-nav">
                <div class="container">
                    <div class="row">
                    
                        <div class="main-logo col-xs-12 col-md-2">
                            <a href="https://www.icolor.com.cn/">
                                <img src="../images/public/icolor-logo.png" alt="icolor-logo">
                            </a>
                        </div>
        
                        <div class="col-xs-12 col-md-6 col-lg-5">
                            <ul class="list-unstyled row main-nav-ul">
                                <li class="col-xs-4">
                                <!-- @@@ 修改链接地址 -->
                                    <a href="https://www.icolor.com.cn/meitu">
                                        <h2>美居美图</h2>
                                        <h4>海量图文灵感搭配</h4>
                                    </a>
                                </li>
                                <li class="col-xs-4">
                                <!-- @@@ 修改链接地址 -->
                                <a href="https://www.icolor.com.cn/jiapin">
                                    <h2>美居家品</h2>
                                    <h4>场景体验一站购买</h4>
                                </a></li>
                                <li class="col-xs-4">
                                <!-- @@@ 修改链接地址 -->
                                <a href="https://www.icolor.com.cn/design">
                                    <h2>美居设计</h2>
                                    <h4>家居设计定制服务</h4>
                                </a></li>
                            </ul>
                        </div>
        
                      
                        
                    </div>
                </div>
            </div>
        </div>
        <!-- 页面头部 结束 -->
        

        <!-- 内容主体开始-->
        <div class="container-fluid">
            <div class="row">
                <div class="topimg">
                    <div class="container">
                        <div class="video" id="player">
                            <video width="100%" height="100%" poster="images/poster.jpg" controls>
                                <source src=" https://w3.icolor.com.cn/videos/HomeStory/ShuaXinYangFangFangQinZheng.mp4" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="caption">对郭涛来说，拍戏时离家在外的日子是他生活的日常。作为设计师的孙大勇深谙这种说走就走的生活，既充满挑战也令人失去了许多居住的归属感。采撷自己对家的最初梦想，
设计师孙大勇为郭涛这个温暖的西北汉子打造出了一座现代极简主义风格的移动城堡，在行走的家中探讨人与自然的关系，刷新现代居所新概念。</div>
                    <div class="text-center">
                        <img src="images/pic1.jpg">
                        <img src="images/pic2.jpg">
                        <img src="images/pic3.jpg">
                        <img src="images/pic4.jpg">
                    </div>
                    <div class="clearfix recommend">
                        <div id="carousel-product" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-product" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-product" data-slide-to="1"></li>
                                <li data-target="#carousel-product" data-slide-to="2"></li>
                            </ol>

                            <div class="carousel-inner" role="listbox">
                                <div class="item" :class="{active: $index == 0}" v-for="scene in scenes">
                                    <div class="pro-main"><img :src="'images/'+scene.img" alt=""></div>
                                    <div class="pro-list">
                                        <div class="pro-item" v-for="product in scene.products">
                                            <div :class="'num num'+($index+1)">1</div>
                                            <div class="img"><img :src="'images/'+product.src" alt=""></div>
                                            <div class="info">
                                                <h3><span v-text="product.brand"></span><span v-text="product.name"></span></h3>
                                                <p>RMB:<span v-text="product.price | currencyDisplay"></span></p>
                                                <a class="btn" :href="product.link" target="_blank">立即购买</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pro-rec">
                                        <div class="text-center title"><img src="images/rec-title.jpg"></div>
                                        <div class="row">
                                            <div class="col-md-3 col-xs-6" v-for="recommend in scene.recommends">
                                                <div class="pro">
                                                    <a :href="recommend.link" target="_blank">
                                                        <img :src="'images/'+recommend.src">
                                                        <h3 v-text="recommend.name"></h3>
                                                        <strong>
                                                            <small>￥</small>
                                                            <span v-text="recommend.price | currencyDisplay"></span>
                                                        </strong>
                                                        <em></em>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <a class="left carousel-control" href="#carousel-product" data-slide="prev">
                                <i class="fa fa-chevron-left"></i>
                            </a>
                            <a class="right carousel-control" href="#carousel-product" data-slide="next">
                                <i class="fa fa-chevron-right"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>  
        <!-- 内容主体结束-->  

        <script type="text/javascript" src="../vendors/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="../vendors/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="../js/app.js"></script>

        <!--video play-->
        <link rel="stylesheet" type="text/css" href="https://www.icolor.com.cn/_ui/desktop/common/icolor/js/flowplayer-6.0.5/skin/playful.css">
        <script src="https://www.icolor.com.cn/_ui/desktop/common/icolor/js/flowplayer-6.0.5/flowplayer.min.js"></script>

        <!--render data-->
        <script src="js/vue.min.js"></script>
        <script src="js/data.js"></script>
        <script>
            $("#player").flowplayer();

            new Vue({
                el: '#carousel-product',
                data: {
                    scenes: scenes
                },
                filters: {
                    currencyDisplay: function(val){

                        function format(num){
                            num = num.toString().replace(/\$|\,/g,'');  
                            if(isNaN(num)){ num = "0"; }  
                            sign = (num == (num = Math.abs(num)));  
                            num = Math.floor(num*100+0.50000000001);  
                            cents = num%100;  
                            num = Math.floor(num/100).toString();
                            if(cents<10){ cents = "0" + cents; }

                            for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++){
                                num = num.substring(0,num.length-(4*i+3))+','+ num.substring(num.length-(4*i+3));
                            }

                            return (((sign)?'':'-') + num + '.' + cents);
                        }

                        var numVal = val.split('/');

                        if(numVal.length > 1){
                            return format(numVal[0]) + '/' +numVal[1];
                        }else{
                            return format(val)
                        }
                        
                    }
                },
                ready: function(){
                    setTimeout(function(){
                        var $carouselControl= $('.carousel-control');
                        var windowHeight = $(window).height();
                        var carouselToTop = $carouselControl.offset().top;
                        var ambit = carouselToTop - windowHeight/2;
                        $(window).scroll(function(event) {
                            var scrollTop = $(this).scrollTop();
                            if(scrollTop > ambit){
                                $carouselControl.css({
                                    marginTop: scrollTop - ambit
                                });
                            }
                        });
                    }, 1000);
                }
            })

        </script>

        <script src="//icsc-cdprd.icolor.com.cn/bundle/beacon"></script>
    </body>

</html>